<template>
  <div class="app-container">
    <div class="top-container">
      <div class="box-title">
        <div
          :class="show==='0'?'title-show':''"
          @click="projectClick"
        >项目概况</div>
        <div
          :class="show==='1'?'title-show':''"
          @click="alarmClick"
        >报警统计</div>

      </div>
      <div class="top-content">
        <div v-show="show==='0'">
          <Ucharts
            type="bar"
            :chartData="projectSummary"
            :opts="{xAxis:{disableGrid:false,data:[{min:0}]},color:['#7cd6cf','#76da91','#63b2ee']}"
          />
        </div>
        <div
          v-show="show==='1'"
          class="top-box"
          v-for="(item,index) of alarmSummary"
          :key="index"
        >
          <image
            class="top-image"
            :src="imageList[item.label]"
            mode=""
          />
          <div class="top-box-right">
            <div class="top-box-value">{{item.value}}</div>
            <div class="top-box-title">{{aSunmmary[item.label]}}</div>

          </div>
        </div>

      </div>
      <div class="bottom-title">
        <div class="bottom-title-content">
          项目-设备数量统计
        </div>
      </div>
      <div class="bottom-container">
        <Ucharts
        type="column"
          :opts="{color:['#f8cb7f'],xAxis:{rotateLabel:false,labelCount:4,enableScroll:true,scrollShow:true,disableGrid:true},yAxis:{disableGrid:false,data:[{min:0,tofix:2},]}}"
          :chartData="projectDevice"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Ucharts from "../../components/ucharts/index";
import { dataQuery } from "@/api/index";
export default {
  components: { Ucharts },
  props: {},
  data() {
    return {
      show: "0",
      projectSummary: [],
      alarmSummary: [],
      projectDevice: [],
      pSunmmary: {
        total: "总数",
        totalOn: "启用总数",
        totalOff: "停用总数"
      },
      aSunmmary: {
        total: "总数",
        recovered: "已恢复",
        notRecovered: "未恢复",
        handled: "已处理",
        notHandled: "未处理"
      },
      imageList: {
        total: require("@/static/monitor/zongshu.png"),
        recovered: require("@/static/monitor/yihuifu1.png"),
        notRecovered: require("@/static/monitor/weihuifu1.png"),
        handled: require("@/static/monitor/yichuli1.png"),
        notHandled: require("@/static/monitor/weichuli1.png")
      },
      chartData1: [
        { value: 50, text: "一班" },
        { value: 30, text: "二班" },
        { value: 20, text: "三班" },
        { value: 18, text: "四班" },
        { value: 8, text: "五班" }
      ]
    };
  },
  onLoad() {
    //   dataQuery()
    this.getProject();
    this.getAlarm();
    this.getDevice();
  },
  onShow() {},
  methods: {
    getProject() {
      const code = "project_summary";
      dataQuery({}, code).then(res => {
        let arr = [];
        if (res.length > 0) {
          arr = res.map(item => ({
            text: this.pSunmmary[item.label],
            value: item.value,
            group: "数量"
          }));
        }
        this.projectSummary = arr;
      });
    },
    getAlarm() {
      const code = "alarm_summary";
      dataQuery({}, code).then(res => {
        this.alarmSummary = res;
      });
    },
    getDevice() {
      const code = "project_device_count";
      dataQuery({}, code).then(res => {
        let arr = [];
        if (res.length > 0) {
          arr = res.map(item => ({
            text: item.label,
            value: item.value,
            group: "设备数量"
          }));
        }
        this.projectDevice = arr;
      });
    },
    projectClick() {
      this.show = "0";
    },
    alarmClick() {
      this.show = "1";
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  //   background: #ebebeb;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  //   padding: 20rpx;
  .top-container {
    .box-title {
      display: flex;
      border-bottom: 2px solid #ebebeb;
      .title-show {
        background: linear-gradient(to left, #1040be, #026dff);
        color: #fff;
      }
      div {
        height: 100rpx;
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
      }
    }
    .top-content {
      width: 100%;
      height: 500rpx;
      background: #fff;
      display: flex;
      padding: 20rpx 0;
      //   justify-content: space-around;

      flex-wrap: wrap;
      .top-box {
        width: 48%;
        height: 100rpx;
        // margin: 0 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        // border: 1px solid #333;
        .top-image {
          width: 80rpx;
          height: 80rpx;
          margin-right: 20rpx;
        }
        .top-box-right {
          text-align: center;
          .top-box-title {
            font-size: 20rpx;
            width: 100rpx;
          }
          .top-box-value {
            font-size: 40rpx;
            color: #37bcbb;
          }
        }
      }
    }
  }
}
.bottom-title {
  width: 100%;
  padding: 5rpx 0;
  background: #ebebeb;
  .bottom-title-content {
    font-size: 35rpx;
    border-left: 5px solid #026dff;
    padding-left: 10rpx;
    margin: 10rpx 0 10rpx 10rpx;
  }
}

.bottom-container {
  // height: calc(100% - 490rpx);
  background: #fff;
  margin: 20rpx 0;
}
</style>